<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-15 16:30:32
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-18 09:33:55
 * @FilePath: \smart-community\src\components\ProportionBar\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="bar_content">
    <div
      class="line_man"
      v-for="item in barValue"
      :style="{ backgroundColor: item.color, width: item.value + '%' }"
    >
      <span class="name">{{ item.name }}</span>
      <span class="value">{{ item.value }}</span>
      <span class="symbol">%</span>
    </div>
  </div>
</template>

<script setup>
import { color } from "echarts";
import { onMounted, computed } from "vue";
let props = defineProps({
  data: {
    type: Array,
    default: () => [
      { name: "男性", value: 89, color: "red" },
      { name: "女性", value: 42, color: "blue" },
    ],
  },
});

let barValue = computed(() => {
  let arr = [];
  // 总数
  let total = 0;
  props.data.forEach((el) => {
    total += el.value;
  });
  props.data.forEach((el) => {
    // 四舍五入

    arr.push({
      name: el.name,
      value: Math.round((el.value / total) * 100),
      color: el.color,
    });
  });
  return arr;
});

// vue3声明周期
onMounted(() => {
  console.log("onMounted");
});
</script>

<style lang="scss" scoped>
.bar_content {
  width: 100%;
  @include display(space-between, center, row);
  .line_man {
    height: 50px;
    border-radius: 25px;
    @include display(center, flex-end, row);
    color: #ffffff;
    vertical-align: text-bottom;

    .name,.symbol {
      font-size: 32px;
      font-family: Adobe Heiti Std, Adobe Heiti Std-R;
      font-weight: normal;
    }
    .value {
      font-size: 48px;
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      line-height: 48px;
      margin-left: 10px;
    }
  }
}
</style>
